<template>
    <div class="child-info">
        <div class="slot-section">
            <slot :parentData="childData" :parentMethod="childMethod"></slot>
        </div>
        <div>上面是个slot，下面是个正常的信息面板</div>
        <div class="info-panel">
            <p>props.message：{{ message }}</p>
            <p>props.count：{{ count }}</p>
            <p>inject.sharedData：{{ injectedData }}</p>
            <p>状态：{{ parentHandleData }}</p>
            <button @click="notifyParent">向父组件发送事件</button>
            <button @click="notifyParentDemo">向parentDemo发送事件</button>
        </div>
    </div>
</template>
<script>
import { defineComponent, inject, ref } from 'vue';

export default defineComponent(
    {
        props:{
            message : String,
            count: {
                type: Number,
                default: 0 
            }
        },
        data(){
            return {
                childData: '这是儿子的东西',
                parentHandleData : "没东西"
            }
        },
        methods:{
            notifyParent(){
                this.$emit('fu-shijian','shuju');
            },
            someMethod(){
                console.log("调用了一些方法");
            },
            childMethod(){
                this.parentHandleData = '儿子按钮Click事件回调方法'
                alert("调用了子组件的方法");
            },
            notifyParentDemo(){
                this.$emit('parent-demo-event','hello 吃饭了某？我是自定义事件，给你发消息来了');
            }
        },
        setup() {
            const injectedData = inject('sharedData');
            return {
                injectedData
            }
        }
    }
);

</script>
<style scoped>
h1{
    color: greenyellow;
}
.child-info{
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    padding: 12px;
}
.info-panel{
    margin-top: 8px;
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px;
}
.slot-section{
    margin-bottom: 6px;
}
</style>